<template>
  <div class="tutorial">
    <div class="bg-dark text-white font-sans">
      <!-- 进度条 -->
      <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
        <div class="progress-line" id="progress-line"></div>
      </div>

      <!-- 教程Hero区域 -->
      <section class="relative pt-24 pb-16 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">使用教程</h1>
            <p class="text-gray-400 max-w-2xl mx-auto">
              详细了解如何使用狂速科技SAAS平台创建和管理您的小程序，从入门到精通
            </p>
          </div>

          <!-- 搜索框 -->
          <div class="max-w-2xl mx-auto mb-16">
            <div class="relative">
              <input type="text" placeholder="搜索教程内容..." id="tutorial-search"
                     class="w-full px-6 py-4 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
              <button class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
                <i class="fa fa-search"></i>
              </button>
            </div>
          </div>

          <!-- 分类标签 -->
          <div class="flex flex-wrap justify-center gap-4 mb-12">
            <button class="px-6 py-2 rounded-full bg-primary text-white text-sm font-medium">全部</button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              入门指南
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              功能教程
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              营销工具
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              数据分析
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              高级设置
            </button>
          </div>
        </div>
      </section>

      <!-- 视频教程区域 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">视频<span class="text-primary">教程</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              通过直观的视频教程，快速掌握狂速科技SAAS平台的核心功能和操作技巧
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 视频教程卡片1 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <div class="relative">
                <img src="https://picsum.photos/600/340?random=1" alt="创建第一个小程序"
                     class="w-full h-48 object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                  <div
                      class="w-16 h-16 rounded-full bg-primary/80 flex items-center justify-center cursor-pointer hover:bg-primary transition-colors">
                    <i class="fa fa-play text-2xl"></i>
                  </div>
                </div>
                <div class="absolute top-3 right-3 bg-dark/80 text-white text-xs px-2 py-1 rounded">
                  12:45
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">创建第一个小程序</h3>
                <p class="text-gray-400 text-sm mb-4">
                  从注册账号到完成第一个小程序的创建，详细了解整个流程
                </p>
                <div class="flex items-center text-sm text-gray-500">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-eye mr-1"></i> 3.2k
                            </span>
                  <span class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i> 2025-03-15
                            </span>
                </div>
              </div>
            </div>

            <!-- 视频教程卡片2 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <div class="relative">
                <img src="https://picsum.photos/600/340?random=2" alt="可视化编辑器使用指南"
                     class="w-full h-48 object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                  <div
                      class="w-16 h-16 rounded-full bg-primary/80 flex items-center justify-center cursor-pointer hover:bg-primary transition-colors">
                    <i class="fa fa-play text-2xl"></i>
                  </div>
                </div>
                <div class="absolute top-3 right-3 bg-dark/80 text-white text-xs px-2 py-1 rounded">
                  18:20
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">可视化编辑器使用指南</h3>
                <p class="text-gray-400 text-sm mb-4">
                  学习如何使用我们强大的可视化编辑器，轻松设计小程序界面
                </p>
                <div class="flex items-center text-sm text-gray-500">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-eye mr-1"></i> 4.5k
                            </span>
                  <span class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i> 2025-04-02
                            </span>
                </div>
              </div>
            </div>

            <!-- 视频教程卡片3 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <div class="relative">
                <img src="https://picsum.photos/600/340?random=3" alt="设置商品与库存管理"
                     class="w-full h-48 object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                  <div
                      class="w-16 h-16 rounded-full bg-primary/80 flex items-center justify-center cursor-pointer hover:bg-primary transition-colors">
                    <i class="fa fa-play text-2xl"></i>
                  </div>
                </div>
                <div class="absolute top-3 right-3 bg-dark/80 text-white text-xs px-2 py-1 rounded">
                  22:10
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">设置商品与库存管理</h3>
                <p class="text-gray-400 text-sm mb-4">
                  如何添加商品、设置分类和管理库存，建立完整的商品体系
                </p>
                <div class="flex items-center text-sm text-gray-500">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-eye mr-1"></i> 5.1k
                            </span>
                  <span class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i> 2025-04-18
                            </span>
                </div>
              </div>
            </div>

            <!-- 视频教程卡片4 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <div class="relative">
                <img src="https://picsum.photos/600/340?random=4" alt="营销活动设置" class="w-full h-48 object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                  <div
                      class="w-16 h-16 rounded-full bg-primary/80 flex items-center justify-center cursor-pointer hover:bg-primary transition-colors">
                    <i class="fa fa-play text-2xl"></i>
                  </div>
                </div>
                <div class="absolute top-3 right-3 bg-dark/80 text-white text-xs px-2 py-1 rounded">
                  15:35
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">营销活动设置</h3>
                <p class="text-gray-400 text-sm mb-4">
                  学习如何设置优惠券、拼团、秒杀等营销活动，提升小程序转化率
                </p>
                <div class="flex items-center text-sm text-gray-500">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-eye mr-1"></i> 4.8k
                            </span>
                  <span class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i> 2025-05-05
                            </span>
                </div>
              </div>
            </div>

            <!-- 视频教程卡片5 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <div class="relative">
                <img src="https://picsum.photos/600/340?random=5" alt="数据分析与报表" class="w-full h-48 object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                  <div
                      class="w-16 h-16 rounded-full bg-primary/80 flex items-center justify-center cursor-pointer hover:bg-primary transition-colors">
                    <i class="fa fa-play text-2xl"></i>
                  </div>
                </div>
                <div class="absolute top-3 right-3 bg-dark/80 text-white text-xs px-2 py-1 rounded">
                  19:45
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">数据分析与报表</h3>
                <p class="text-gray-400 text-sm mb-4">
                  如何查看和分析小程序数据，从数据中获取业务洞察
                </p>
                <div class="flex items-center text-sm text-gray-500">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-eye mr-1"></i> 3.7k
                            </span>
                  <span class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i> 2025-05-12
                            </span>
                </div>
              </div>
            </div>

            <!-- 视频教程卡片6 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <div class="relative">
                <img src="https://picsum.photos/600/340?random=6" alt="小程序上线与推广"
                     class="w-full h-48 object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                  <div
                      class="w-16 h-16 rounded-full bg-primary/80 flex items-center justify-center cursor-pointer hover:bg-primary transition-colors">
                    <i class="fa fa-play text-2xl"></i>
                  </div>
                </div>
                <div class="absolute top-3 right-3 bg-dark/80 text-white text-xs px-2 py-1 rounded">
                  21:30
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">小程序上线与推广</h3>
                <p class="text-gray-400 text-sm mb-4">
                  完成小程序上线前的准备工作，提交审核并学习基本推广技巧
                </p>
                <div class="flex items-center text-sm text-gray-500">
                            <span class="flex items-center mr-4">
                                <i class="fa fa-eye mr-1"></i> 4.2k
                            </span>
                  <span class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i> 2025-05-18
                            </span>
                </div>
              </div>
            </div>
          </div>

          <div class="text-center mt-12">
            <button
                class="px-8 py-3 border-2 border-primary text-primary rounded-full font-medium hover:bg-primary/10 transition-colors">
              查看更多视频教程
            </button>
          </div>
        </div>
      </section>

      <!-- 分步指南区域 -->
      <section class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">分步<span class="text-primary">指南</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              详细的步骤说明，帮助您一步步掌握狂速科技SAAS平台的核心功能
            </p>
          </div>

          <div class="max-w-4xl mx-auto">
            <!-- 步骤1 -->
            <div class="bg-card rounded-xl p-8 mb-8 relative hover-lift">
              <div class="step-number">1</div>
              <h3 class="text-xl font-bold mb-4">注册与账号设置</h3>
              <div class="tutorial-accordion" id="step-1-content">
                <div class="space-y-4">
                  <div>
                    <h4 class="font-semibold mb-2">1.1 注册账号</h4>
                    <p class="text-gray-400">
                      访问我们的官方网站，点击右上角的"注册"按钮，填写手机号码或邮箱，设置密码完成注册。注册成功后，系统会自动发送验证邮件或短信，请注意查收。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">1.2 验证账号</h4>
                    <p class="text-gray-400">
                      打开您的邮箱或手机短信，找到验证链接或验证码，按照提示完成账号验证。验证成功后，您就可以使用完整的狂速科技SAAS平台功能。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">1.3 完善个人信息</h4>
                    <p class="text-gray-400">
                      登录后，点击右上角的个人头像，选择"个人中心"，填写您的真实姓名、公司名称、联系方式等信息，以便我们为您提供更好的服务。
                    </p>
                  </div>
                </div>
              </div>
              <button class="mt-4 px-4 py-2 bg-primary rounded-md text-white text-sm font-medium accordion-toggle"
                      data-target="step-1-content">
                展开详情
              </button>
            </div>

            <!-- 步骤2 -->
            <div class="bg-card rounded-xl p-8 mb-8 relative hover-lift">
              <div class="step-number">2</div>
              <h3 class="text-xl font-bold mb-4">创建第一个小程序</h3>
              <div class="tutorial-accordion" id="step-2-content">
                <div class="space-y-4">
                  <div>
                    <h4 class="font-semibold mb-2">2.1 选择小程序类型</h4>
                    <p class="text-gray-400">
                      登录后，在管理后台点击"创建小程序"按钮，选择您要创建的小程序类型，如电商小程序、服务类小程序等。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">2.2 选择模板</h4>
                    <p class="text-gray-400">
                      根据您的业务需求，从我们提供的丰富模板库中选择一个合适的模板。您可以预览模板效果，也可以在后续进行自定义修改。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">2.3 配置基本信息</h4>
                    <p class="text-gray-400">
                      填写小程序的基本信息，包括小程序名称、图标、简介等。这些信息将显示在小程序的展示页面和搜索结果中。
                    </p>
                  </div>
                </div>
              </div>
              <button class="mt-4 px-4 py-2 bg-primary rounded-md text-white text-sm font-medium accordion-toggle"
                      data-target="step-2-content">
                展开详情
              </button>
            </div>

            <!-- 步骤3 -->
            <div class="bg-card rounded-xl p-8 mb-8 relative hover-lift">
              <div class="step-number">3</div>
              <h3 class="text-xl font-bold mb-4">可视化编辑器使用</h3>
              <div class="tutorial-accordion" id="step-3-content">
                <div class="space-y-4">
                  <div>
                    <h4 class="font-semibold mb-2">3.1 认识编辑器界面</h4>
                    <p class="text-gray-400">
                      进入可视化编辑器后，您可以看到左侧的组件库、中间的编辑区域和右侧的属性设置栏。组件库中提供了各种常用的页面组件，如轮播图、商品列表、按钮等。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">3.2 添加和编辑组件</h4>
                    <p class="text-gray-400">
                      从组件库中拖拽组件到编辑区域，即可添加到页面中。选中组件后，在右侧属性设置栏中可以修改组件的样式、内容、链接等属性。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">3.3 保存和预览</h4>
                    <p class="text-gray-400">
                      在编辑过程中，记得及时点击"保存"按钮保存您的修改。点击"预览"按钮可以在不同设备尺寸下查看小程序的效果。
                    </p>
                  </div>
                </div>
              </div>
              <button class="mt-4 px-4 py-2 bg-primary rounded-md text-white text-sm font-medium accordion-toggle"
                      data-target="step-3-content">
                展开详情
              </button>
            </div>

            <!-- 步骤4 -->
            <div class="bg-card rounded-xl p-8 mb-8 relative hover-lift">
              <div class="step-number">4</div>
              <h3 class="text-xl font-bold mb-4">商品与库存管理</h3>
              <div class="tutorial-accordion" id="step-4-content">
                <div class="space-y-4">
                  <div>
                    <h4 class="font-semibold mb-2">4.1 添加商品</h4>
                    <p class="text-gray-400">
                      在管理后台点击"商品管理"，然后点击"添加商品"按钮。填写商品的基本信息，如名称、价格、库存、描述等，并上传商品图片。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">4.2 设置商品分类</h4>
                    <p class="text-gray-400">
                      为了方便用户查找商品，您可以创建商品分类，并将商品分配到相应的分类中。在"商品分类"页面，点击"添加分类"按钮，填写分类名称和排序规则。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">4.3 库存管理</h4>
                    <p class="text-gray-400">
                      在商品列表中，点击商品的"库存管理"按钮，可以实时查看和修改商品的库存数量。当库存不足时，系统会自动提醒您补货。
                    </p>
                  </div>
                </div>
              </div>
              <button class="mt-4 px-4 py-2 bg-primary rounded-md text-white text-sm font-medium accordion-toggle"
                      data-target="step-4-content">
                展开详情
              </button>
            </div>

            <!-- 步骤5 -->
            <div class="bg-card rounded-xl p-8 mb-8 relative hover-lift">
              <div class="step-number">5</div>
              <h3 class="text-xl font-bold mb-4">营销活动设置</h3>
              <div class="tutorial-accordion" id="step-5-content">
                <div class="space-y-4">
                  <div>
                    <h4 class="font-semibold mb-2">5.1 设置优惠券</h4>
                    <p class="text-gray-400">
                      在管理后台点击"营销中心"，选择"优惠券管理"，然后点击"添加优惠券"按钮。设置优惠券的类型、面额、使用条件、有效期等参数。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">5.2 创建拼团活动</h4>
                    <p class="text-gray-400">
                      在"营销中心"选择"拼团活动"，点击"创建活动"按钮。选择参与活动的商品，设置拼团人数、拼团价格、活动时间等信息。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">5.3 发起秒杀活动</h4>
                    <p class="text-gray-400">
                      在"营销中心"选择"秒杀活动"，点击"新建秒杀"按钮。选择秒杀商品，设置秒杀价格、库存、开始时间和结束时间。
                    </p>
                  </div>
                </div>
              </div>
              <button class="mt-4 px-4 py-2 bg-primary rounded-md text-white text-sm font-medium accordion-toggle"
                      data-target="step-5-content">
                展开详情
              </button>
            </div>

            <!-- 步骤6 -->
            <div class="bg-card rounded-xl p-8 mb-8 relative hover-lift">
              <div class="step-number">6</div>
              <h3 class="text-xl font-bold mb-4">小程序上线与推广</h3>
              <div class="tutorial-accordion" id="step-6-content">
                <div class="space-y-4">
                  <div>
                    <h4 class="font-semibold mb-2">6.1 提交审核</h4>
                    <p class="text-gray-400">
                      在完成小程序的开发和测试后，点击"提交审核"按钮，将小程序提交到相应的平台（如微信、支付宝等）进行审核。审核周期一般为
                      1 - 7 个工作日。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">6.2 发布上线</h4>
                    <p class="text-gray-400">
                      审核通过后，点击"发布上线"按钮，您的小程序就可以正式在平台上对外发布，用户可以通过搜索或分享链接访问。
                    </p>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">6.3 基础推广技巧</h4>
                    <p class="text-gray-400">
                      您可以通过微信朋友圈、微信群、公众号等渠道分享小程序链接，吸引用户访问。也可以在小程序中设置分享奖励，鼓励用户主动分享给好友。
                    </p>
                  </div>
                </div>
              </div>
              <button class="mt-4 px-4 py-2 bg-primary rounded-md text-white text-sm font-medium accordion-toggle"
                      data-target="step-6-content">
                展开详情
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "TutorialView",
  layout: "default",
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0,
      searchQuery: '',
      accordionOpen: null
    };
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    toggleAccordion(step) {
      this.accordionOpen = this.accordionOpen === step ? null : step;
    },
    updateProgressBar() {
      const winScroll = window.pageYOffset;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.updateProgressBar);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updateProgressBar);
  }
};
</script>

<style scoped type="text/tailwindcss">
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }

  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }

  .progress-line {
    height: 3px;
    background: linear-gradient(90deg, #48b6ff, #2e6cf1);
    width: 0%;
    transition: width 0.3s ease;
  }

  .tutorial-accordion {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }

  .tutorial-accordion.active {
    max-height: 1000px;
    opacity: 1;
  }

  .step-number {
    position: absolute;
    left: -30px;
    top: -10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
}
</style>
